.main-hero {
  position: relative;
  overflow: hidden;
  height: 75vh;

  &-bg {
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;

    &:after {
      content: "";
      background-image: linear-gradient(-180deg, rgba(45, 58, 111, .5), rgba(0, 0, 0, .5));
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
  }

  &-content {
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 1;

    &-avatar {
      margin: 1rem 0;

      &-img {
        width: 6.25rem;
        height: 6.25rem;
        border: 4px solid #818182;
        border-radius: 50%;
        box-shadow: 0 0 1px 11px rgba(129, 129, 130, 0.5), 0 0 1px 22px rgba(129, 129, 130, 0.26);
      }
    }

    &-title {
      margin: .5rem 0 1rem;
      font-size: 1.75rem;
    }

    &-description {
      margin: .5rem;
      font-size: 1rem;
    }

    &-social {
      &-links {
        text-decoration: none;
        font-size: 1.25rem;
        text-align: center;
        margin: 0 .125rem;
        color: rgba(255, 255, 255, 1);

        &:hover {
          text-decoration: none;
          color: rgba(255, 255, 255, .75);
        }
      }
    }
  }

  &-waves-area {
    width: 100%;
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: 0;

    .waves-svg {
      width: 100%;
      height: 10rem;
      // 小于 768px
      @media (max-width: 767.98px) {
        & {
          height: 8rem;
        }
      }

      // 小于 576px
      @media (max-width: 575.98px) {
        & {
          height: 5rem;
        }

      }
    }

    .parallax > use {
      animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
    }

    .parallax > use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
      fill: rgba(255,255,255, 0.7);
    }

    .parallax > use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
      fill: rgba(255,255,255, 0.5);
    }

    .parallax > use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
      fill: rgba(255,255,255, 0.3);
    }

    .parallax > use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
      fill: rgba(255,255,255, 1);
    }

    @keyframes move-forever {
      0% {
        transform: translate3d(-90px, 0, 0);
      }
      100% {
        transform: translate3d(85px, 0, 0);
      }
    }
  }

  &-header {
    width: 100%;
    height: 18rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-style: solid;
    border-color: transparent transparent $background-color transparent;
    &.header-right {
      border-width: 0 100vw 10rem 0;
    }
    &.header-left {
      border-width: 0 0 10rem 100vw;
    }
    // 小于 768px
    @media (max-width: 767.98px) {
      &.header-right {
        border-width: 0 100vw 8rem 0;
      }
      &.header-left {
        border-width: 0 0 8rem 100vw;
      }
    }

    // 小于 576px
    @media (max-width: 575.98px) {
      &.header-right {
        border-width: 0 100vw 5rem 0;
      }
      &.header-left {
        border-width: 0 0 5rem 100vw;
      }
    }
  }
}

@mixin dark-mode {
  .main-hero {
    &-bg {
      &:after {
        background-image: linear-gradient(-180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .9));
      }
    }

    &-content {
      color: $dark-main-hover-color;

      &-avatar {
        &:before {
          content: "";
          position: absolute;
          background: rgba(0, 0, 0, .5);
          width: 6.25rem;
          height: 6.25rem;
          border-radius: 50%;
        }

        &-img {
          border: none;
        }
      }

      &-social {
        &-links {
          color: $dark-main-color;
          transition: all 500ms ease 0ms;

          &:hover {
            color: $dark-main-hover-color;
          }
        }
      }
    }

    &-waves-area {
      .parallax > use:nth-child(1) {
        fill: rgba(38, 50, 56, 0.7);
      }

      .parallax > use:nth-child(2) {
        fill: rgba(38, 50, 56, 0.5);
      }

      .parallax > use:nth-child(3) {
        fill: rgba(38, 50, 56, 0.3);
      }

      .parallax > use:nth-child(4) {
        fill: rgba(38, 50, 56, 1);
      }
    }

    &-header {
      border-color: transparent transparent $dark-background-color transparent;
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
